<!-- 新增设备信息 -->
<template>
  <div id="dialog-container">
    <el-dialog v-dialogDrag title="新增设备信息" :fullscreen="isFullScreen" :custom-class="isFullScreen?'fullscreen-default-dialog':'vertical-center-dialog'" append-to-body :close-on-click-modal="false"
      :visible.sync="dialogVisible" @close="$emit('update:show', false)" :before-close="handleClose" :show="show" width="700px">
       <button type="button" aria-label="fullScreen" class="el-dialog__headerbtn" style="margin-right:25px;top:" @click="isFullScreen = !isFullScreen">
                                                                                                  <i class="el-dialog__close iconfont icon-fuzhicopy22"></i>
                                                                                                </button>
      <el-form :model="formData" :rules="rules" ref="form" :inline="true" label-width="100px" size="small">
        <el-row>
          <el-col :span="12">
            <el-form-item label="设备编号：" prop="code">
              <el-input v-model="formData.code"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备名称：" prop="name">
              <el-input v-model="formData.name"></el-input>
            </el-form-item>
          </el-col>
           <el-col :span="12">
            <el-form-item label="工作时间:" prop="workTime">
              <el-input v-model="formData.workTime" type="number"></el-input>
            </el-form-item>
          </el-col>
        <!--  <el-col :span="12">
            <el-form-item label="单位：" prop="unit">
              <el-input v-model="formData.unit"></el-input>
            </el-form-item>
          </el-col>-->

          <el-col :span="12">
            <el-form-item label="品牌：" prop="brand">
              <el-input v-model="formData.brand"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="厂商：" prop="producer">
              <el-input v-model="formData.producer"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="负责人：" prop="ownerUid">
              <el-input v-model="formData.ownerUid" style="width: 140px;"></el-input>
              <choose-principal @owner="owner" style="display: inline-block;"></choose-principal>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="放置位置：" prop="position">
              <el-input v-model="formData.position"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
              <el-form-item label="设备状态：">
             <el-select v-model="formData.status"  placeholder="请选择">
                 <el-option v-for="item in statusList"  :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
                 </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注：" prop="remark">
              <el-input type="textarea" v-model="formData.remark" style="width: 526px;"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
        <el-button @click="handleClose">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import Choose from './choose-principal';
  import {
    changeFormitemSpace
  } from '../../../../utils/common' // 表单验证有误时，改变表单的上下间距
  import { postSaveDevice } from 'service/task';
  export default {
    components: {
      'choose-principal': Choose
    },
    data() {
      return {
        dialogVisible: false,
        isFullScreen: false,
        formData: {
          code: '',
          name: '',
          unit: '',
          brand: '',
          producer: '',
          ownerUid: '',
          position: '',
          workTime: '',
          remark: ''
        },
        statusList: [{
          value: '0',
          label: '停用'
        },{
          value: '1',
          label: '正常',
        }, {
          value: '2',
          label: '报废',
        }
        ],
        rules: {
          code: [{ required: true, message: '请输入设备编号', trigger: 'blur' }],
          name: [{ required: true, message: '请输入设备名称', trigger: 'blur' }],
          workTime: [{ required: true, message: '请输入设备工作时间', trigger: 'blur' }],
          // brand: [{ required: true, message: '请输入设备工作时间', trigger: 'blur' }],
          producer: [{ required: true, message: '请输入设备厂商', trigger: 'blur' }],
         brand: [{ required: true, message: '请输入品牌', trigger: 'blur' }],

         },
      }
    },
    props: {
      show: {
        type: Boolean,
        default: false,
      }
    },
    watch: {
      show() {
        this.dialogVisible = this.show;
      }
    },
    methods: {
      handleClose() { /* 关闭的时候更新状态值 */
        this.dialogVisible = false;
        this.$refs['form'].resetFields();
      },
      // 负责人
      owner(val) {
        this.formData.ownerUid = val;
      },
      submitForm(formName) {
        console.log(this.formData);
        this.$refs[formName].validate((valid) => {
        if (valid) {
          postSaveDevice({
          // this.axios.post("/task/saveApply", {
              code: this.formData.code,
              name: this.formData.name,
              unit: this.formData.unit,
              cnt: this.formData.cnt,
              brand: this.formData.brand,
              producer: this.formData.producer,
              ownerUid: this.formData.ownerUid,
              position: this.formData.position,
              remark: this.formData.remark
            }).then(res => {
              // console.log(res)
              if(res.data.success) {
               this.$message({
            message: res.data.message,
            type: 'success',
            duration: 1000
            });
                this.$emit('refreshAdd');
              }else {
              this.$alert(res.data.message, "提示", {
                type: "error"
              });
             this.canEdit=false;
                return;
            }
              this.dialogVisible = false;
            })
        } else {
          changeFormitemSpace(document);
          return false;
        }
      });
      }
    }
  }

</script>
